<template>
    <!-- html代码 -->
    <div id="Publicity">
        <el-row>
            <el-col :span="12">
                <h3>能够入党的学生：</h3>
                <dl>
                    <dt v-for="students in isShow">
                        {{ students.name }}
                    </dt>
                </dl>
                <h3>不能入党的学生：</h3>
                <dl>
                    <dt v-for="students in noShow">
                        {{ students.name }}
                    </dt>
                </dl>
            </el-col>
            <el-col :span="12">
                <h3>学生：{{ students[cnt].name }}</h3>
                <el-button type="success" @click="handleClick">下一位同学</el-button>
                <div v-show="!(students[cnt].isApply) || !(students[cnt].is18)">
                    <p>年龄不满足18岁,不可以入党</p>
                </div>
                <div v-show="(students[cnt].isApply) && (students[cnt].is18)">
                    <p>年龄满足18岁,可以入党</p>
                    <img src="../assets/img/1-2.png" style="width: 90%;">
                </div>
            </el-col>
        </el-row>
    </div>

</template>


<script>
// js
import { ref, computed } from "vue"


export default {
    name: "Publicity",
    components: {
    },
    setup() {
        const cnt = ref(0)
        const handleClick = function () {
            let newCnt = Math.floor(Math.random() * 10)
            while (cnt.value == newCnt)
                newCnt = Math.floor(Math.random() * 10)
            cnt.value = newCnt
            console.log(cnt.value);
        }
    
        const students = [
            { name: '张三', isApply: true, is18: false },
            { name: '李四', isApply: false, is18: true },
            { name: '王五', isApply: true, is18: true },
            { name: '赵六', isApply: false, is18: false },
            { name: '杨七', isApply: true, is18: true },
            { name: '张八', isApply: true, is18: false },
            { name: '李九', isApply: false, is18: true },
            { name: '王十', isApply: true, is18: true },
            { name: '赵十一', isApply: false, is18: false },
            { name: '杨十二', isApply: true, is18: true }
        ]
        const isShow = computed(() => {
            return students.filter(students => (students.isApply && students.is18))
        })
        const noShow = computed(() => {
            return students.filter(students => !(students.isApply && students.is18))
        })
        return {
            cnt,
            isShow,
            noShow,
            students,
            handleClick
        }
    }
}

</script>


<style>
/* css */
</style>